<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">项目管理</span>
			<span class="h2">乡镇征拆(创建户主)</span>
      <router-link v-bind="{to:'/ustable/'+1+'/'+1}">
						<el-button type="primary">新建单个户主</el-button>
					</router-link>
		</div>
		<div class="contens">
			<div class="left-content clearfix" style="margin-bottom: 10px;">
				<div class="fl">
					<span>工程项目：</span>
					<el-select v-model="proValue" placeholder="请选择" filterable @change="changePro()">
						<el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
						</el-option>
					</el-select>
					<span style="margin-left: 20px;">行政区域</span>
					<el-cascader :options="regions" v-model="region" clearable separator='-' change-on-select filterable></el-cascader>
          <el-button type="primary" @click="setflows()" v-show="userType==1||userType==2">勾选报至镇数据审核</el-button>
				</div>
				<div class="fr">
					<el-input v-model="search" placeholder="请输入身份证或姓名" style="width:217px;"></el-input>
					<el-button type="primary" @click="fnSearch">查询</el-button>
				</div>
			</div>
			<el-table ref="multipleTable" :data="prosData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
        <el-table-column type="index" width="50">
              </el-table-column>
				<el-table-column type="selection" prop="ID">
				</el-table-column>
				<!--<el-table-column prop="gcxm" label="项目" width="120">
				</el-table-column>-->
				<el-table-column prop="MainName" label="姓名">
				</el-table-column>
				<el-table-column prop="CardID" label="身份证" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Tel" label="电话" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="BankName" label="银行" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="BankAccount" label="银行卡号" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="RegionStr" label="区域" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="CreateMan" label="创建人" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-dropdown trigger="click">
							<el-button type="primary">
								操作<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>
									<router-link v-bind="{to:'/ustable/'+scope.row.ID+'/'+scope.row.ProjectID}">
										<el-button size="small" type="success">查看</el-button>
									</router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-button type="danger" size="small" @click="fnDel(scope.row.ID)">删除</el-button>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
				</el-pagination>
			</div>
		</div>
		<el-dialog title="添加主体" :visible.sync="Tip" width="30%">
			<div>
				<el-form :label-position="labelPosition" label-width="100px" :model="form">
					<el-form-item label="工程项目:">
						<el-select v-model="form.gcxm" placeholder="请选择">
							<el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
							</el-option>
						</el-select>
					</el-form-item>
						<el-form-item label="行政区域:">
						<el-cascader :options="regions" v-model="form.region" change-on-select filterable></el-cascader>
					</el-form-item>
					<el-form-item label="户主:">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="身份证:">
						<el-input v-model="form.card"></el-input>
					</el-form-item>
					<el-form-item label="电 话:">
						<el-input v-model="form.tel"></el-input>
					</el-form-item>
					<el-form-item label="开户行:">
						<el-input v-model="form.bankName"></el-input>
					</el-form-item>
					<el-form-item label="银行账号:">
						<el-input v-model="form.bankID"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			<el-button @click="Tip = false">取 消</el-button>
			<el-button type="primary" @click="Tip = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import api from "../../axios/api";
export default {
  name: "projectLevyFrom",
  data() {
    return {
      loading:false,
      Tip: false,
      search: "",
      region: [],
      pages: 1, //分页页码
      total: 1, //条数
      proValue: "", //工程选中
      labelPosition: "left",
      multipleSelection: [],
      prosData: [], //数据
      options: [], //工程项目
      regions: [], //行政区域
      form: {
        gcxm: "",
        region: "",
        name: "",
        card: "",
        tel: "",
        bankID: "",
        bankName: ""
      },
      userType:1,
    };
  },
  created() {
    this.userType=sessionStorage.UserType
//  this.getList(this.pages,'',0,'');
    this.getlistde();
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
        if (row.exit) {
          return 'warning-row';
        }
        return '';
      },
    //搜索
    fnSearch() {
      this.pages=1;
      this.getList(this.pages,this.search,this.region[this.region.length-1],this.proValue);
    },
    //分页
    handleCurrentChange(val) {
      this.getList(val,this.search,this.region[this.region.length-1],this.proValue);
    },
    //当项目改变的时候重新获取行政区域
    changePro(){
    	this.regions=[]
    	if(this.proValue==''){
    		this.region = []
    		return false
    	}
      	this.anonymousget(this.proValue)
    },
    //获取户主列表
    getList(index,val,regid,proid) {
      this.loading=true;
      this.$post(api.housList, {
        Para: {
          QueryKeyWord: val,
          RegionID:regid,
          ProjectID: proid
        },
        PageSize: 10,
        PageIndex: index - 1,
        OrderString: "",
        ToExcel: false
      }).then(response => {
        if (response.isOK == true && response.state == 200) {
          this.loading=false;
          this.prosData = response.Data.Data;
          this.total = response.Data.Items ? response.Data.Items : 1;
        } else {
          this.loading=false;
          this.$message.error(response.msg);
        }
      }).catch((error)=>{
        this.loading=false;
      })
    },
    //获取项目
    getlistde() {
      this.$post(api.getlistde).then(response => {
        if (response.isOK == true && response.state == 200) {
          this.options = response.Data;
          this.proValue=response.Data[0].ID;
          this.getList(this.pages,'',0,this.proValue);
          this.anonymousget(this.proValue)
        }else{
          this.$message.error(response.msg);
        }
      }).catch((error)=>{
        this.loading=false;
      })
    },
    //获取行政区域
    anonymousget(val) {
      this.regions=[];
      this.$get(api.anonymousget + "/" + val).then(response => {
        if (response.data.isOK == true && response.data.state == 200) {
          for (var i = 0; i < response.data.Data.length; i++) {
            this.regions.push({
              label: response.data.Data[i].RegionName,
              value: response.data.Data[i].ID,
              ParentID: response.data.Data[i].ParentID
            });
          }
          this.regions = this.$toTree(this.regions);
        }else{
          this.$message.error(response.data.msg)
        }
      }).catch((error)=>{
        this.loading=false;
      })
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection=[]
      for(var i=0;i<val.length;i++){
        this.multipleSelection.push(val[i].ID)
      }
    },
    //删除户主
    fnDel(id) {
      this.$confirm("将永久删除该用户主体, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading=true;
          this.$get(api.housDel + "/" + id).then(response => {
            if (response.data.isOK == true && response.data.state == 200) {
              this.loading=false;
              this.getList(this.pages);
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              this.loading=false;
              this.$message.error(response.msg);
            }
          }).catch((error)=>{
            this.loading=false;
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //上报
    setflows(){
      if(this.multipleSelection.length>0){
          this.loading=true;
          this.$post(api.setflows,this.multipleSelection).then(response => {
            if (response.isOK == true && response.state == 200) {
              this.getList(1,'',0,'');
              this.loading=false;
              this.$message({
                type: "success",
                message: "上报成功  "+response.Data+"  条！"
              });
            } else {
              this.loading=false;
              this.$message.error(response.msg);
            }
          }).catch((error)=>{
            this.loading=false;
          })
      }else{
        this.$message.error("请选择上报内容");
      }
    },
    //修改弹窗
    editTip() {
		this.Tip=true;
	}
  }
};
</script>

<style scoped>

</style>